* { box-sizing: border-box; }

html{
  height: 100%;
}

body {
  background-color: $background-primary;
	min-width: 320px;
	height: 100%;
  overflow-x: hidden;
  transition: transform .5s ease-out;

  @media (min-width: $grid-breakpoint){
    padding-left: 0;
    padding-right: 0;
  }

  &.open-menu{
    @media (max-width: $grid-breakpoint - 1){
      transform: translateX($nav-responsive-width);
    }
  }
}

.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all .4s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(50px);
  opacity: 0;
}

@keyframes fadeinmove {
  from { opacity: 0; transform: translateX(+20%);  }
  to   { opacity: 1; transform: translateX(0%); }
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.text-negative {
  color: $text-negative;
}

.wrapper{
  position: relative;
  padding-left: 0;
  top: $header-height-breakpoint;
  height: calc(100% - #{$header-height-breakpoint});
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;

  @media (min-width: $grid-breakpoint){
    height: auto;
    top: initial;
  }
}

::selection { 
  background: $primary;
  color: white;
}

.fa{
  text-decoration: none;
  display: inline-block;
  &:hover,
  &.active,
  &:focus{
    outline: 0;
    text-decoration: none;
  }
}

img{
  max-width: 100%;
  height: auto;
}

.shape{
  width: 100%;
  max-height: 100%;
}
.disabled {
  cursor: not-allowed;
}

li, ul {
  list-style-type: none;
}

section {
  margin-bottom: 2.4rem;

  ul {
    padding: 0;
  }
  
  @media (min-width: $screen-sm){
    margin-bottom: 7.2rem;
  }
}

button {
  display: inline-block;
  padding: 1rem 2rem;
  margin: 0;
  height: 3.6rem;
  background-color: $primary;
  text-decoration: none;
  color: #ffffff;
  cursor: pointer;
  border: 0;
  text-align: center;
  transition: background 250ms ease-in-out, 
              transform 150ms ease;
  -webkit-appearance: none;
  -moz-appearance: none;
}

button:hover {
  background-color: #574bc1;
}

button:focus {
  outline: none;
}

button:active {
  transform: scale(0.99);
}

.text-input {
  display: flex;
  flex-direction: column;

  &__label {
    margin-bottom: 4px;
  }

  &__field {
    transition: border .1s ease;
    border: 1px solid $grey-3;
    background-color: white;
    padding: 0 8px;
    height: 36px;
    font-size: 16px;

    &:active,
    &:hover {
      outline: none;
      border: 1px solid $primary;
    }

    &:focus {
      outline-offset: 0;
      border: 1px solid $primary;
    }

    &:disabled {
      background-color: grey;
      pointer-events: none;
    }
  }
}